<template>
	<div class="container page-component__scroll">
		<el-backtop target=".page-component__scroll"></el-backtop>
		<!-- 面包屑导航 -->
		<el-row>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item>帮买废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<!-- 搜索菜单 -->
		<el-row>
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="状态:">
					<el-radio-group fill="#ECF5FF" text-color="#6DB5FF" v-model="goodsStatus">
						<el-radio-button label="">全部商品</el-radio-button>
						<el-radio-button label="1">上架商品</el-radio-button>
						<el-radio-button label="0">下架商品</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="商品名称:">
					<el-input @clear="clearInfo" clearable v-model="queryInfo.goodsName"
						placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="所属门店:">
					<el-input @clear="clearInfo" clearable v-model="queryInfo.shopName"
						placeholder="请输入所属门店"></el-input>
				</el-form-item>
				<el-form-item label="添加时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" clearable start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-button type="primary" class="bai" @click="searchCommunityList">搜索</el-button>
			</el-form>
		</el-row>
		<el-row>
			<el-table :header-cell-style="{ backgroundColor: '#1890FF', color: '#FFFFFF' }" :data="goodsList" border
				style="width: 100%" :row-style="{ height: '70px' }">
				<el-table-column align="center" prop="goodsId" label="商品ID">
				</el-table-column>
				<el-table-column align="center" prop="goodsName" label="商品名">
				</el-table-column>
				<el-table-column align="center" prop="goodsShopName" label="门店名称">
				</el-table-column>
				<el-table-column align="center" prop="goodsSalesVolume" label="销量">
				</el-table-column>

				<el-table-column align="center" prop="goodsPresentPrice" label="预估价">
				</el-table-column>
				<el-table-column align="center" prop="addTime" label="发布时间">
				</el-table-column>

				<el-table-column align="center" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.goodsStatus == 1" type="success">上架</el-tag>
						<el-tag type="danger" v-else>
							下架
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button v-if="scope.row.goodsStatus == 1" class="edit" type="text" size="small"
							@click="xiajia(scope.row)">立即下架</el-button>
						<el-button v-else class="edit" type="text" size="small"
							@click="shangjia(scope.row)">立即上架</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination @size-change="sizeChange" @current-change="changePage" :current-page="queryInfo.currentPage"
				:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				queryInfo: {
					goodsName: '',
					startTime: '',
					endTime: '',
					currentPage: 1,
					pageNum: 1,
					pageSize: 10,
					goodsStatus: '',
					shopName: '',
				},
				date: null,
				total: 1,
				goodsList: [],
				editList: {
					goodsName: '',
					goodsImage: '',
					goodsPresentPrice: 0,
					goodsShopName: ''
				},
				goodsStatus: '',
				dialogFormVisible: false
			}
		},
		methods: {

			//获取商品信息
			querySelect() {
				this.$http.get('goods/querySearchShopGoodsList', {
					params: this.queryInfo
				}).then(res => {
					this.goodsList = res.data.data.list
					// console.log(this)
					// this.queryInfo.goodsStatus = ''  
					this.total = res.data.data.total
				}).catch(res => {
					this.$message.error('服务器错误')
				})
			},
			changePage(index) {
				this.queryInfo.pageNum = index
				this.querySelect()
			},
			sizeChange(size) {
				this.queryInfo.pageSize = size
				this.querySelect()
			},
			searchCommunityList() {
				this.querySelect()
			},
			clearInfo() {
				this.querySelect()
			},

			//开启添加窗口
			add() {
				this.dialogFormVisible = true
			},

			//添加商品
			newAdd() {
				this.$http.post('goods/addGoods', this.editList)
					.then(res => {
						if (res.data.status == 200) {
							console.log(res)
							this.$message.success('添加成功')
							this.querySelect()
							this.clear()
						} else {
							this.$message.error('添加失败')
						}
					}).catch(err => {
						this.$message.error('响应异常')
					})
			},

			//修改商品信息
			update() {
				this.$http.post('courierStation/modifyCourierStation', this.editList)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('修改成功')
							this.querySelect()
							this.clear()
						}
					}).catch(err => {
						this.$message.error('响应异常')
					})
			},
			//修改商品状态
			modify(rd) {
				// console.log(rd)
				this.$http.post('goods/modifyShopGoods', rd)
					.then(res => {
						console.log('上下架')
						this.querySelect()
					}).catch(res => {
						this.$message.error('请求失败')
					})
			},
			//下架商品
			xiajia(row) {
				let rd = {
					'goodsId': row.goodsId,
					'goodsStatus': 0
				}
				this.modify(rd)
			},
			//上架商品
			shangjia(row) {
				let rd = {
					'goodsId': row.goodsId,
					'goodsStatus': 1
				}
				this.modify(rd)
			},

			//清除商品信息
			clear() {
				this.editList = {
					goodsName: '',
					goodsImage: '',
					goodsPresentPrice: 0,
					goodsShopName: ''
				}
				this.dialogFormVisible = false
			}
		},
		mounted() {
			this.querySelect()
		},
		watch: {
			date() {
				if (this.date != null) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
					this.querySelect()
				}
			},
			goodsStatus() {
				this.queryInfo.goodsStatus = this.goodsStatus
				this.querySelect()
			}
		}
	}
</script>
<style scoped>
	.el-row {
		margin-bottom: 15px
	}

	.bai {
		color: white
	}

	.edit {
		color: rgb(68, 158, 188)
	}

	.edit:hover {
		opacity: 0.7
	}

	.dia-inp {
		max-width: 370px;
		min-width: 100px;
	}
</style>